<template>
  <div class="home">
    <Button @click="viewComment">查看评论</Button>

    <Popup v-model="showCommentCard" position="bottom" class="popup">
      <Field
        class="field"
        :style="{ opacity: commentFocus ? 1 : 0 }"
        @blur="inputBlue"
        ref="commentField"
        v-model="commentVal"
        placeholder="请输入评论"
      />
      <div class="loading" v-if="loading">
        评论加载中……
      </div>
      <div v-if="!loading" class="container">
        <div class="header">
          <div class="header-left">评论({{ commentList.length }})</div>
          <div class="header-right" @click="() => addComment(null, null)">
            <van-icon name="edit" />添加评论
          </div>
        </div>
        <div class="comment-wrapper">
          <List>
            <div v-for="(comment, i) in commentList" :key="i">
              <div class="comment">
                <img
                  class="head-img"
                  src="https://up.enterdesk.com/edpic/b9/16/80/b9168058feb5da78a68c0b0da0e80510.png"
                  alt=""
                />
                <div class="comment-main">
                  <div class="info">
                    <div class="name-box">
                      <div class="name">{{ comment.name }}</div>
                      <div class="time">
                        {{ moment(comment.time).format("YYYY-MM-DD") }}
                      </div>
                    </div>
                    <div class="active" >
                      <div class="good" :style="{color: comment.status ? 'orange' : 'gray'}">
                        <van-icon @click="() => onGood(i)" name="good-job-o" />{{ comment.good }}
                      </div>
                      <van-icon name="chat-o" @click="() => addComment(i, null)" />
                    </div>
                  </div>
                  <div class="content">{{ comment.content }}</div>

                  <div class="child-comment" v-if="comment.childComments.length">
                    <div v-for="(child, ii) in (comment.isShowAll ? comment.childComments : comment.childComments.slice(0,3))" :key="ii">
                      <div @click="() => addComment(i, ii)">
                        <span>{{ child.name }}</span>
                        <span v-if="child.reportName">
                          <span class="report"> 回复 </span>
                          <span>{{ child.reportName }}</span>
                        </span>
                        <span>:</span>
                        <span class="child-content">{{ child.content }}</span>
                      </div>
                    </div>
                    <div
                      v-if="
                        comment.childComments &&
                        comment.childComments.length > 3
                      "
                      class="open-child-comments"
                      @click="() => openToggle(i)"
                    >
                      {{!comment.isShowAll  ? `展开全部${comment.childComments.length}条回复` : '收起'}}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </List>
        </div>
      </div>
    </Popup>
  </div>
</template>

<script>
import { Button, Popup, List, Field } from "vant";
import moment from "moment";
import commentList from "./mock";

export default {
  data() {
    return {
      loading: false,
      moment,
      showCommentCard: false,
      commentList: [],
      commentVal: "",
      commentFocus: false,
      reportIndex: null,
      currentCommentIndex: null,
      userInfo:{
        id: 1,
        name: "小龙女",
        createTime: new Date(),
        content: "",
        good: 0,
        status: false,
        childComments: []
      }
    };
  },
  components: {
    Button,
    Popup,
    List,
    Field,
  },
  computed: {},
  mounted() {},
  methods: {
    viewComment() {
      this.requestConmment();
      this.showCommentCard = true;
    },

    requestConmment(){
      this.loading = true;
      // 模拟请求数据
      setTimeout(() => {
        this.commentList = commentList;
        this.loading = false;
      }, 1000)
    },

    openToggle(index){
      let newCommentList = [...this.commentList];
      newCommentList[index].isShowAll = !newCommentList[index].isShowAll;
      this.commentList = newCommentList;
    },

    onGood(index){
      let newCommentList = [...this.commentList];
      const { good } = newCommentList[index];
      newCommentList[index].status = !newCommentList[index].status;
      newCommentList[index].good = newCommentList[index].status ? good + 1 : good - 1;
      this.commentList = newCommentList;
    },

    addComment(currentCommentIndex, reportIndex) {
      this.currentCommentIndex = currentCommentIndex;
      this.reportIndex = reportIndex;
      this.commentFocus = true;
      this.$refs.commentField.focus();
    },

    inputBlue() {
      if(!this.commentVal) return;
      const newComment = this.userInfo;
      newComment.id = new Date().getTime();
      newComment.content = this.commentVal;
      let newCommentList = [...this.commentList];

      // 添加评论
      if(this.reportIndex === null && this.currentCommentIndex  === null) {
        const _newComment = {...newComment};
        newCommentList.unshift(_newComment);
      }

      // 回复评论
      if(this.reportIndex === null && this.currentCommentIndex !== null){
        const _newComment = {...newComment};
        const childComments = [...newCommentList[this.currentCommentIndex].childComments];
        childComments.push(_newComment);
        newCommentList[this.currentCommentIndex].childComments = childComments;
      }

      // 评论回复的评论
      if(this.reportIndex !== null && this.currentCommentIndex !== null){
        const reportComment = {...newComment};
        reportComment.reportName = newCommentList[this.currentCommentIndex].childComments[this.reportIndex].name;
        newCommentList[this.currentCommentIndex].childComments.push(reportComment);
      }
      console.log(newCommentList)
      this.commentList = [...newCommentList];
      this.commentFocus = false;
      this.commentVal = '';
      this.currentCommentIndex = null;
      this.reportIndex = null;
    },

  },
};
</script>
<style lang="less" scoped>
.popup {
  height: 500px;
}

.field {
  position: absolute;
  z-index: 10000;
  transform: translate3d(0, 0, 0);
  bottom: 0;
}

.container {
  position: relative;
}
.home {
  height: 100%;
  background-color: #f1f1f1;
  padding: 20px 10px;
  box-sizing: border-box;
}
.comment-wrapper {
  padding: 10px 20px;
  overflow: scroll;
  height: 430px;
}

.comment {
  display: flex;
  margin-bottom: 15px;
}

.comment-main {
  flex: 1;
}

.info {
  display: flex;
  justify-content: space-between;
  .name-box {
    text-align: start;
  }
  .name {
    color: gray;
    font-size: 14px;
  }

  .time {
    margin-top: 3px;
    color: gray;
    font-size: 12px;
  }
}

.child-comment {
  margin-top: 5px;
  background-color: #e6e6e662;
  border-radius: 3px;
  padding: 5px 10px;
  box-sizing: border-box;
  text-align: start;
  font-size: 14px;

  .child-content,
  .report {
    color: gray;
  }
}

.loading{
  height:100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.active {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: gray;
  align-self: start;

  .good {
    margin-right: 10px;
  }
}

.content {
  font-size: 18px;
  text-align: start;
  margin-top: 5px;
}

.head-img {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  margin-right: 5px;
}
.header {
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  // position: fixed;
  top: 0;
  z-index: 100;
}
.header-left {
  color: #242424;
}
.header-right {
  color: rgb(38, 160, 222);
}

.open-child-comments{
  color: rgb(38, 160, 222);
  font-size: 14px;
}
</style>
